<template>
	<div id="djd-rec">
		<el-col :span="24">
			<div v-for="(item, index) in zs" :key="index" class="djd_rec_a" href="#">
				<el-image :src="item.imgUrl"></el-image>
				<p class="djd_rec_title">
					<span class="djd_rec_titlea">{{ item.caption }}</span><br>
					<span class="djd_rec_titleb">{{ item.region }}</span>
				</p>

			</div>
		</el-col>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			zs: {},
		},
	};
</script>

<style lang="scss" scoped>
	/deep/ .el-col-24 {
		display: flex;
		flex-wrap: wrap;
		padding-top: 15px;
	}

	.djd_rec_a {
		position: relative;
		box-sizing: border-box;
		padding-bottom: 8px;
    padding-right: 10px;
		width: 33.3%;
		cursor: pointer;
    &:nth-child(3n) {
      padding-right: 0;
    }
	}

	#djd-rec .el-image {
		width: 100%;
		height: 230px;
	}
	
	.djd_rec_title {
		color: #ffffff;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		text-align: center;
		transform: translate(-50%, -50%);
	}

	.djd_rec_titlea {
		font-size: 35px;
		
	}

	.djd_rec_titleb {
		font-size: 20px;
	}
</style>
